<template>
  <div>
    <group label-width="4.5em" label-margin-right="2em" label-align="right">
      <x-input title="账号" v-model="username" name="mobile" placeholder="请输入手机号码" keyboard="number" is-type="china-mobile"></x-input>
      <x-input title="密码" v-model="password" ></x-input>
    </group>

    <div style="padding:15px;">
      <x-button @click.native="signIn" type="primary">登录</x-button>
      <divider style="margin-top: 15px;margin-bottom: 10px;">忘记密码？</divider>
      <x-button type="default" link="/demo">找回密码</x-button>
    </div>
  </div>
</template>

<script>
  import { GroupTitle, Group, Cell, XInput, XButton, Divider, AjaxPlugin } from 'vux'

  export default {
    components: {
      Group,
      GroupTitle,
      Cell,
      XInput,
      XButton,
      Divider,
      AjaxPlugin
    },
    data () {
      return {
        username: '13392533303',
        password: '123456'
      }
    },
    methods: {
      signIn () {
        var params = { 'username': this.username, 'password': this.password }
        var headers = { headers: { 'Content-Type': 'application/json; charset=UTF-8', 'Accept': 'application/json' } }

        var self = this
        this.$http.post('/login', params, headers).then(function (response) {
          let data = response.data
          let accessToken = data.access_token
          localStorage.setItem('token', accessToken)

          self.$router.push('/')
        })
      }
    }
  }
</script>
